<!-- 富文本编辑器 -->
<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
import { Plus } from "@element-plus/icons-vue";
/**文件对象数组 */
const fileList = defineModel("fileList", {
  default: []
});
/**上传成功的图片地址数组 */
const model = defineModel({ default: [] });
const props = defineProps({
  limit: {
    type: Number,
    default: 3
  },
  tip: {
    type: String,
    default: "可上传3张图片"
  }
});
const instance = getCurrentInstance();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const upload_ok = (response, uploadFile, uploadFiles) => {
  console.log("upload_ok", response, uploadFile);
  // console.log("filelist", pData.imgArr);

  if (response.code == 200) {
    uploadFile.status = "success";
    // config.formData[key] = response.data;
    update_value(uploadFiles);
  } else {
    uploadFile.status = "fail";
    instance.proxy.$message.error(response.msg || "上传失败");
  }
};
function update_value(fileList) {
  let arr = [];
  for (let i = 0; i < fileList.length; i++) {
    if (fileList[i].response.code == 200) {
      // console.log("fileList[i].response.data", fileList[i].response.data);

      arr.push(fileList[i].response.data.url);
    }
  }
  model.value = arr;
}
function handleRemove(file, uploadFiles) {
  update_value(uploadFiles);
}
function handlePictureCardPreview(file) {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
}
</script>

<template>
  <el-upload
    ref="upload1"
    v-model:file-list="fileList"
    :limit="props.limit"
    list-type="picture-card"
    accept=".jpg,.png,.jpeg,.gif"
    drag
    action="/api/v1/resources/public"
    :on-success="upload_ok"
    :on-remove="handleRemove"
    :on-preview="handlePictureCardPreview"
  >
    <template #tip>
      <div class="el-upload__tip">
        {{ props.tip }}
      </div>
    </template>
    <el-icon size="1.5rem"><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
